<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./vue.js"></script>
</head>
<body>
<div id="root">
  <button @click="fn">点我</button>
  <p>{{obj}}</p>
</div>
</body>
<script>
  new Vue({
    el: '#root',
    data: {
      obj:{
        username:"zs",
        age:18
      }
    },
    methods:{
      fn(){
        this.obj.username +="!";
      }
    },
    watch:{
      "obj.username"(newv,oldv){
          console.log(this.obj.username,newv,oldv);
      },

      //不会打印×
      // obj(newValue,oldValue){
      //   console.log("obj",newValue,oldValue)
      // }

      //深度监听效率慢 没有deep就不会打印
      // obj:{
      //     //句柄
      //     handler(newValue,oldValue){
      //         console.log(1,this.obj,newValue,oldValue,newValue===oldValue); //true
      //     },
      //     deep:true,
      // }
    }
  })
</script>
</html>